<template>
    <div class="container">
        <el-main>
            <div class="login_form">
                <h1>管理后台</h1>
                <el-form ref="form" :model="form" class="form">
                    <el-form-item>
                        <el-input v-model="form.username" class="username" placeholder="请输入用户名">
                            <template slot="prepend" class="prepend"><img src="../assets/user.png" alt=""></template>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="form.password" class="password" placeholder="请输入密码">
                            <template slot="prepend" class="prepend"><img src="../assets/lock.png" alt=""></template>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary"  @click="onSubmit">登录</el-button>
                        <el-button type="primary"  @click="onRegister">注册</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-main>
    </div>
</template>


<style>
#app .container{
    text-align:center;
    width:100%;
    height:100%;
    background-image:url(../assets/bg1.jpg);
    background-size:100% 100%;
}

.el-main{
    width:100%;
    height:100%;
}

.login_form .el-input{
    width: 15%;
}

.form{
    margin-top:3%;
}

.login_form{
    padding-top:1%;
    width:26%;
    height:27%;
    background-color: white;
    margin:14% auto 0 auto;
    padding-bottom: 1%;
}

.login_form .el-input{
    width:70%;
    height:30%;
}

.login_form h1{
    color:black;
    height:15%;
}

.login_form .el-button{
    width:20%;
    height:10%;
}

</style>

<script>
export default {
  name:'Login',
  data(){
      return {
          form:{
              username:'',
              password:''
          }
      }
  },
  methods:{
      onSubmit:function(){
          sessionStorage.clear();
        //   console.log(this.form)
            // let menu = [
            //         {
            //             pathName:'查询订单',
            //             path:'/index/orderSelect',
            //             compo:'OrderSelect'
            //         },
            //         {
            //             pathName:'添加订单',
            //             path:'/index/orderAdd',
            //             compo:'OrderAdd'
            //         }
            //     ];

            let that = this;
          this.$http.post('/menu').then(function(res){
                let menu = res.data.menu
                // console.log(menu)
                // console.log(menu.length)
                for(var i=0;i<menu.length;i++){
                    for(var ii=0;ii<menu[i].child.length;ii++){
                        let temp = function(j,jj){
                            let obj = {
                                path: menu[j].child[jj].path,
                                name: menu[j].child[jj].pathName,
                                component: function(resolve){
                                    require([`@/components/${menu[j].child[jj].compo}`],resolve)
                                },
                                meta: {
                                    requireAuth: true
                                }
                            }
                        return obj
                        }(i,ii)
                        that.$router.options.routes[1].children.push(temp)
                    }
                }
                sessionStorage.setItem('menu',JSON.stringify(menu))
                that.$router.addRoutes(that.$router.options.routes);
                sessionStorage.setItem('token','123')
                that.$router.push({path:'/index',query:{menu:menu}})
                
          })        
      },
      onRegister:function(){
          console.log(this.form.password)
          let that = this;
          this.$http.post('/menu').then(function(res){
                console.log(res.data.menu)
          })
      }
  }
}
</script>
